<template>
    <div>
      <!-- tab栏 -->
       <div class="head">
        <image :src="src1" class="headd" resize="cover" @click="back()"></image>
        <text class="head1">设置营业时间</text>
        <text class="head2" @click="sure()">确定</text>
      </div>
     <div class="time1">
     	<text class="time2">请设置工作时间</text>
     	<!-- <text class="time3">全天营业</text> -->
     </div>
     <div class="start_time" @click="start1()">
     	<text class="start1" @click="start1()">  开始营业时间  </text>
     	<text class="start2" @click="start1()">00:00</text>
     </div>
     <!-- <text class="warn">未设置开始营业时间前系统默认为00:00</text> -->
     <div class="end_time" @click="ends()">
     	<text class="end1" @click="">  结束营业时间  </text>
     	<text class="end2">00:00</text>
     </div>
     <!-- <text class="warn">未设置开始营业时间前系统默认为24:00</text> -->
     <!-- 弹窗~~~选择时间 -->
     	<div class="wrap" v-show="show||shows"></div>
     	<div class="wrap1" v-show="show">
		<div class="timer">
			<text class="s_time" >开始营业时间：{{stimer}}</text>
			<div class="timera">
				<ul class="hour">
					<li class="active">00时</li>
					<li>01时</li>
					<li>02时</li>
					<li>03时</li>
					<li>04时</li>
					<li>05时</li>
					<li>06时</li>
					<li>07时</li>
					<li>08时</li>
					<li>09时</li>
					<li>10时</li>
					<li>11时</li>
					<li>12时</li>
					<li>13时</li>
					<li>14时</li>
					<li>15时</li>
					<li>16时</li>
					<li>17时</li>
					<li>18时</li>
					<li>19时</li>
					<li>20时</li>
					<li>21时</li>
					<li>22时</li>
					<li>23时</li>
				</ul>
				<ul class="minute">
					<li class="active">00分</li>
					<li>01分</li>
					<li>02分</li>
					<li>03分</li>
					<li>04分</li>
					<li>05分</li>
					<li>06分</li>
					<li>07分</li>
					<li>08分</li>
					<li>09分</li>
					<li>10分</li>
					<li>11分</li>
					<li>12分</li>
					<li>13分</li>
					<li>14分</li>
					<li>15分</li>
					<li>16分</li>
					<li>17分</li>
					<li>18分</li>
					<li>19分</li>
					<li>20分</li>
					<li>21分</li>
					<li>22分</li>
					<li>23分</li>
					<li>24分</li>
					<li>25分</li>
					<li>26分</li>
					<li>27分</li>
					<li>28分</li>
					<li>29分</li>
					<li>30分</li>
					<li>31分</li>
					<li>32分</li>
					<li>33分</li>
					<li>34分</li>
					<li>35分</li>
					<li>36分</li>
					<li>37分</li>
					<li>38分</li>
					<li>39分</li>
					<li>40分</li>
					<li>41分</li>
					<li>42分</li>
					<li>43分</li>
					<li>44分</li>
					<li>45分</li>
					<li>46分</li>
					<li>47分</li>
					<li>48分</li>
					<li>49分</li>
					<li>50分</li>
					<li>51分</li>
					<li>52分</li>
					<li>53分</li>
					<li>54分</li>
					<li>55分</li>
					<li>56分</li>
					<li>57分</li>
					<li>58分</li>
					<li>59分</li>
				</ul>
			</div>
			<div class="foot">
				<text class="foo1" @click="cancel()">取消</text>
				<text class="foo2" @click="cancel()">确定</text>
			</div>
		</div>
	</div>
		<div class="wrap2" v-show="shows">
			<div class="timer">
				<text class="s_time" >结束营业时间：{{stimer}}</text>
				<div class="timera">
					<ul class="hour">
						<li class="active">00时</li>
						<li>01时</li>
						<li>02时</li>
						<li>03时</li>
						<li>04时</li>
						<li>05时</li>
						<li>06时</li>
						<li>07时</li>
						<li>08时</li>
						<li>09时</li>
						<li>10时</li>
						<li>11时</li>
						<li>12时</li>
						<li>13时</li>
						<li>14时</li>
						<li>15时</li>
						<li>16时</li>
						<li>17时</li>
						<li>18时</li>
						<li>19时</li>
						<li>20时</li>
						<li>21时</li>
						<li>22时</li>
						<li>23时</li>
					</ul>
					<ul class="minute">
						<li class="active">00分</li>
						<li>01分</li>
						<li>02分</li>
						<li>03分</li>
						<li>04分</li>
						<li>05分</li>
						<li>06分</li>
						<li>07分</li>
						<li>08分</li>
						<li>09分</li>
						<li>10分</li>
						<li>11分</li>
						<li>12分</li>
						<li>13分</li>
						<li>14分</li>
						<li>15分</li>
						<li>16分</li>
						<li>17分</li>
						<li>18分</li>
						<li>19分</li>
						<li>20分</li>
						<li>21分</li>
						<li>22分</li>
						<li>23分</li>
						<li>24分</li>
						<li>25分</li>
						<li>26分</li>
						<li>27分</li>
						<li>28分</li>
						<li>29分</li>
						<li>30分</li>
						<li>31分</li>
						<li>32分</li>
						<li>33分</li>
						<li>34分</li>
						<li>35分</li>
						<li>36分</li>
						<li>37分</li>
						<li>38分</li>
						<li>39分</li>
						<li>40分</li>
						<li>41分</li>
						<li>42分</li>
						<li>43分</li>
						<li>44分</li>
						<li>45分</li>
						<li>46分</li>
						<li>47分</li>
						<li>48分</li>
						<li>49分</li>
						<li>50分</li>
						<li>51分</li>
						<li>52分</li>
						<li>53分</li>
						<li>54分</li>
						<li>55分</li>
						<li>56分</li>
						<li>57分</li>
						<li>58分</li>
						<li>59分</li>
					</ul>
				</div>
				<div class="foot">
					<text class="foo1" @click="cancel()">取消</text>
					<text class="foo2" @click="cancel()">确定</text>
				</div>
			</div>
		</div>
   </div>
</template>
<style scoped>
	.wrap2{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		opacity: 1;
	}
	.active{
		background: #eee;
	}
    .head{
      width: 100%;
      height: 48px;
      padding-top: 12px;
      /*background-color: pink;*/
      box-sizing: border-box;
      line-height: 32px;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      /*margin-top: 17px;*/
      position: fixed;
      top: 0;
      left: 0;
      box-shadow: 1px 1px 1px #ccc;
      background-color: #fff;
      /*position: relative;*/
      z-index: 2; 
    }
    .headd{
      width: 15px;
      height: 20px;
      /*background-color: #33c179;*/
      /*position: fixed;*/
      position: absolute;
      left: 12px;
    }
    .head2{
      position: absolute;
      right: 12px;
      margin-left: 80px;
      font-size: 20px;
      /*color: #000;*/
      font-weight: bold;
      color: #33c179;
    }
    .head1{
      font-size: 20px;
      font-weight: bold;
    }
    .time1{
    	width: 100%;
    	height: 16px;
    	box-sizing: border-box;
    	padding-left: 12px;
    	padding-right: 12px;
    	justify-content: space-between;
    	margin-top: 88px;
    	flex-direction: row;
    }
    .time2{
    	height: 16px;
    	line-height: 16px;
    	font-size: 16px;
    	color: #666;
    }
    .time3{
    	height: 16px;
    	line-height: 16px;
    	font-size: 16px;
    	color: #33c179;
    }
    .start_time{
    	width: 100%;
    	height: 36px;
    	/*background-color: pink;*/
    	padding-left: 12px;
    	padding-right: 12px;
    	margin-top: 40px;
    	box-sizing: border-box;
    	flex-direction: row;
    	justify-content: space-between;
    	position: relative;
    }
    .end_time{
    	width: 100%;
    	height: 36px;
    	/*background-color: pink;*/
    	padding-left: 12px;
    	padding-right: 12px;
    	margin-top: 63px;
    	box-sizing: border-box;
    	flex-direction: row;
    	justify-content: space-between;
    	position: relative;
    }
    .start1{
    	height: 36px;
    	text-align: center;
    	line-height: 36px;
    	color: #fff;
    	font-size: 17px;
    	background-color: #33c179;
    	border-radius: 25px;
    }
    .end1{
    	height: 36px;
    	text-align: center;
    	line-height: 36px;
    	color: #fff;
    	font-size: 17px;
    	background-color: #33c179;
    	border-radius: 25px;
    }
    .start2{
    	font-size: 31px;
    	/*position: absolute;
    	right: 12px;
    	bottom: 0;*/
    	/*color: #33c179;*/
    }
    .end2{
    	font-size: 31px;
    	position: absolute;
    	right: 12px;
    	bottom: 0;
    }
    .warn{
    	width: 100%;
    	height: 13px;
    	line-height: 13px;
    	font-size: 13px;
    	padding-left: 12px;
    	color: #999;
    	margin-top: 11px;
    }
    .wrap{
    	width: 100%;
    	flex: 1;
    	height: 100%;
    	position: fixed;
    	top: 0;
    	left: 0;
    	background-color: #000;
    	opacity: .3;
    	z-index: 3;
    }
    .wrap1{
    	width: 100%;
    	height: 100%;
    	position: fixed;
    	top: 0;
    	left: 0;
    	z-index: 99;
    	opacity: 1;
    }
    .timer{
    	width: 223px;
    	height: 326px;
    	margin: auto;
    	margin-top: 185px;
    	background-color: #fff;
    }
    .s_time{
    	height: 16px;
    	margin-left: auto;
    	margin-right: auto;
    	margin-top: 18px;
    	line-height: 16px;
    	font-size: 16px;
    	color: #33c179;
    	font-weight: bold;
    }
    .timera{
    	width: 174px;
    	height: 145px;
    	/*background-color: red;*/
    	margin-left: auto;
    	margin-right: auto;
    	margin-top: 61px;
    	flex-direction: row;
    	/*overflow: scroll;*/
    	justify-content: space-between;
    	padding-left: 6px;
    	padding-right: 6px;
    }
    .foot{
    	width: 223px;
    	padding-left: 7px;
    	padding-right: 7px;
    	justify-content: space-between;
    	flex-direction: row;
    	/*background-color: pink;*/
    	height: 36px;
    	margin-top: 45px;
    	/*position: relative;*/
    }
    .foo1,.foo2{
    	width: 88px;
    	height: 36px;
    	border-radius: 25px;
    	background-color: #33c179;
    	font-size: 16px;
    	line-height: 36px;
    	text-align: center;
    	color: #fff;
    }
    .hour{
    	width: 80px;
    	height: 145px;
    	overflow-y: scroll;
    	/*background-color: pink;*/
    	text-align: center;
    }
    .minute{
    	width: 80px;
    	height: 145px;
    	overflow-y: scroll;
    	/*background-color: silver;*/
    	text-align: center;
    }
    .hour li{
    	width: 80px;
    	height: 29px;
    	text-align: center;
    	line-height: 29px;
    	color: #888;
    }
    .minute li{
    	width: 80px;
    	height: 29px;
    	text-align: center;
    	line-height: 29px;
    	color: #888;
    }
</style>
<script>
export default {
    data () {
        return {
          src1: 'http://192.168.2.123:8080/img/index_back.png',
          startTime: '09:00',
          endTime: '19:00',
          show: false,
          stimer: '00:00',
            shows:false
        }
    },
	mounted(){
		// 开始营业部分点击事件显示
        $(".wrap1 .hour li").click(function(){
            $(this).attr("class","active").siblings().removeAttr("class");
		})
        $(".wrap1 .minute li").click(function(){
            $(this).attr("class","active").siblings().removeAttr("class");
        })
		$(".wrap1 .foo2").click(function(){
            var a='';
            var b="";
            $(".wrap1 .hour li").each((k,v)=>{
                if(v.className==="active"){
                    a= parseInt(v.innerHTML);
                    if(a<10){
                        a="0"+a
					}
                }
			})
            $(".wrap1 .minute li").each((k,v)=>{
                if(v.className==="active"){
                    b= parseInt(v.innerHTML);
                    if(b<10){
                        b="0"+b
                    }
                }
            })
			$(".start2").html(a+":"+b);
		});
		// 结束营业部分点击事件显示
        $(".wrap2 .hour li").click(function(){
            $(this).attr("class","active").siblings().removeAttr("class");
        })
        $(".wrap2 .minute li").click(function(){
            $(this).attr("class","active").siblings().removeAttr("class");
        })
        $(".wrap2 .foo2").click(function(){
            var a='';
            var b="";
            $(".wrap2 .hour li").each((k,v)=>{
                if(v.className==="active"){
                    a= parseInt(v.innerHTML);
                    if(a<10){
                        a="0"+a
                    }
                }
            })
            $(".wrap2 .minute li").each((k,v)=>{
                if(v.className==="active"){
                    b= parseInt(v.innerHTML);
                    if(b<10){
                        b="0"+b
                    }
                }
            })
            $(".end2").html(a+":"+b);
        })
},
    methods: {
    	// 点击返回上一层
    	back(){
    		this.$router.back(-1);
    	},
        ends(){
    	    this.shows=true;
		},
    	// 点击确定
    	sure(){
            var a = document.getElementsByClassName("start2")[0];
            var b = document.getElementsByClassName("end2")[0];
			console.log(a.innerHTML,b.innerHTML);
			const info={
                shopStartTime:a.innerHTML,
                shopEndTime:b.innerHTML
			};
            localStorage.setItem('shopTime', JSON.stringify(info));
            this.$router.push('/setShopInfo');
    	},
    	// 点击开始营业时间
    	start(){

    	},
    	// 点击结束营业时间
    	end(){

    	},
    	cancel(){
    	    setTimeout(()=>{
                this.show = false;
                this.shows = false;
            },100);
    	},
    	start1(){
    		this.show = true;
    	}
    }
}
</script>